<template>
    <div class="flex_x fx_c fx_ac"> 
        <navTop :topIndex="topIndex"></navTop>
        <div class="carousel">
            <el-carousel height="400px" >
            <el-carousel-item v-for="item in carouselImg" :key="item">
                <img class="carouselImg" :src="item" alt="轮播图">
            </el-carousel-item>
            </el-carousel>
        </div>
        <div class="flex_x fx_row fx_pc " style="width:100%;padding:10px 0 0 0;"  >
            <div style="width:500px">
                <el-carousel height="40px" direction="vertical" arrow="never" indicator-position="none">
                <el-carousel-item class="flex_x fx_row fx_sa fx_ac" v-for="(item,index) in students" :key="index">    
                    <div>{{item.college}}</div>
                    <div>{{item.student}}</div>
                </el-carousel-item>
                </el-carousel>
            </div>
            <div class="hr"></div>
            <div style="width:500px">
                <el-carousel height="40px" direction="vertical" arrow="never" indicator-position="none">
                <el-carousel-item class="flex_x fx_row fx_sa fx_ac" v-for="(item,index) in students" :key="index">    
                    <div>{{item.college}}</div>
                    <div>{{item.student}}</div>
                </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="flex_x fx_pc red_titles">党的要闻</div>
        <div class="flex_x fx_row fx_pc" style="width:100%;background:#efebea">
            <div class="red_title">
                
            </div>
            <div class="flex_x fx_row fx_wrap fx_sb" style="width:44.5%;height:387px;margin-left:20px">
                <div class="red_title_list" v-for="(item,index) in redrightList" :key="index" :style="{backgroundImage:'url('+item.imgList+')',backgroundRepeat:'no-repeat',backgroundSize:'100%'}">
                    <div class="listTexts paging" :title="item.listText">{{item.listText}}</div>
                </div>
            </div>
        </div>
        <div class="flex_x fx_row" style="width:100%;height:500px;padding-top:40px">
            <div style="width:170px;writing-mode:vertical-lr;font-size:45px;padding:40px 0 0 70px">专题·网站</div>
            <div class="flex_x fx_row fx_sa" style="width:80%">
                <div class="red_list" v-for="(item,index) in redList" :key="index" :style="{backgroundImage:'url('+item.List+')',backgroundSize:'100%',backgroundRepeat:'no-repeat'}">
                    {{item.listText}}
                    <div style="margin:340px 0 0 120px;font-size:20px">——查看更多</div>
                </div>
                
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</template>
<script>
import navTop from '../components/phs/navTop.vue'
export default {
    components:{
       navTop
    },
    data(){
        return{
            topIndex:1,
            carouselImg:[require("../assets/img/lunbo_1.jpeg"),
                        require("../assets/img/lunbo_2.jpeg"),
                        require("../assets/img/lunbo_3.jpeg")],
            redrightList:[{
                imgList:require('../assets/img/bg_red.jpg'),
                listText:"实施党的代表精神还有什么别地打发打发打发打发打发拿到JFK拉丁教父克拉斯打开房间啊考虑JFK拉到JFK了解JFK垃圾啊开发技术开发大家安静反对法"
                },{
                imgList:require('../assets/img/bg_red.jpg'),
                listText:"实施党的代表精神"
                },{
                imgList:require('../assets/img/bg_red.jpg'),
                listText:"实施党的代表精神"
                },{
                imgList:require('../assets/img/bg_red.jpg'),
                listText:"实施党的代表精神"
                }],
            redList:[{
                List:require("../assets/img/list_1.jpg"),
                listText:"学习贯彻总书记“七一”重要讲话精神"
                },{
                List:require("../assets/img/list_2.jpg"),
                listText:"学习贯彻党的十九届山中全会精神"
                },{
                List:require("../assets/img/list_3.jpg"),
                listText:"整改落实,为民办事"
                },{
                List:require("../assets/img/list_4.jpg"),
                listText:"这里是你所想的兰溪镇"
                }],
            students:[
                {
                    college:"计算机学院",
                    student:"江橙"
                },{
                    college:"财会金融学院",
                    student:"凌欣"
                },{
                    college:"土木工程学院",
                    student:"冰云"
                },{
                    college:"财会金融学院",
                    student:"凌韵"
                },{
                    college:"财会金融学院",
                    student:"云汐"
                }
            ]
        }
    }
}
</script>
<style scoped>
.s{
    background-color: lightsteelblue;
}
.ss{
    background-color: thistle;
}
.carousel{
    width: 100%;
    height: 400px;
    background-color: thistle;
}
.carouselImg{
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat:no-repeat;
}
.red_titles{
    width: 100%;
    font-size: 40px;
    font-weight: bold;
    padding: 10px 0 20px 0;
    background-color: #efebea;
}
.listTexts{
    width: 150px;
    height: 38px;
    margin-top:130px;
    color:white;
}
.red_title{
    width: 650px;
    height: 420px;
    background-image: url('../assets/img/bg_red.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}
.red_title_list{
    width: 320px;
    height: 170px;
    border: 1px solid black;
   
}
.red_list{
    width: 230px;
    height: 485px;
    color: white;
    font-size: 25px;
    padding:20px 0 0 25px;
    writing-mode:vertical-lr;
    /* border: 1px solid black; */
}
.red_list:hover{
   margin-top: -20px;
}
.hr{
    width: 3px;
    height: 40px;
    background-color: rgb(26, 222, 248);
}
.bottom{
    width: 100%;
    height: 400px;
    margin-top: 60px;
    background-color: blanchedalmond;
}
.paging {
  /*多行省略 */
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.flex_x{
    display: flex;
}
.fx_row{
    flex-direction: row;
}
.fx_c{
    flex-direction: column;
}
.fx_ac{
    align-items: center;
}
.fx_pc{
    justify-content: center;
}
.fx_sa{
    justify-content: space-around;
}
.fx_sb{
    justify-content:space-between
}
.fx_wrap{
    flex-wrap: wrap;
}
</style>